<template>
  <div class="bg">
    <!-- <Loading v-show="LOADING"></Loading> -->

    <nav-com title="提现" :showView="showView" @back="backHandler()">
      <div @click="withdrawalList()" style="font-size: 14px;color: #F86931;">到账记录</div>
    </nav-com>
    <van-tabs color="#FF6F4E" @click="childActive(active)" title-active-color="#FF6B35" v-model="active">
      <van-tab v-for="(item, index) in tabList" :key="index" :title="item"></van-tab>
    </van-tabs>
    <van-row class="bg_m">
      <div class="bg_m_img">
        <ul>
          <li>
            <span>累计收益</span>
            <p>{{ summary | amountFilter }}</p>

          </li>
          <li>
            <span>当前可提</span>
            <p>{{ cash | amountFilter }}</p>
          </li>
        </ul>
      </div>
    </van-row>
    <van-row class="w_part2">
      <div class="bonus_part2_title"><span>提现金额</span></div>
      <div class="w_part2_box">
        <label>￥</label>
        <input type="text" @blur="moneyHandler(money)" v-model="money" placeholder="" />
      </div>
      <div class="w_part2_text" style="color: #f00">
        {{ message }}
      </div>
      <div class="w_part2_text">请输入10的倍数,手续费6%</div>
    </van-row>
    <van-row class="w_part2" style="margin-top: 15px;padding-bottom: 10px;">
      <div
        style="line-height: 50px;font-size: 14px;font-weight: 500;display: flex;color: #333333;justify-content: space-between;border-bottom: 1px solid #E7E7E7;">
        <div>当前手机号: </div>
        <div>{{ userMobile }}</div>
      </div>
      <div class="padd_box" style="
          display: flex;
          margin-top: 10px;
          align-items: center;
          justify-content: space-between;
        ">
        <van-col span="12">
          <div class="">
            <van-field label-class="label" :border="true" type="number" v-model="captcha" placeholder="请输入验证码" />
          </div>
        </van-col>
        <van-col span="10" style="text-align: right;">
          <div class="login_box" @click="codeHandler" v-if="codeFalg" style="text-align: right; color: #ff491f">
            {{ codeText }}
          </div>
          <div class="login_box" v-else style="text-align: right; color: #ff491f">
            {{ codeText }}
          </div>
        </van-col>

      </div>

    </van-row>
    <van-row class="w_part2" style="margin-top: 8vw;display: none;">
      <div class="bonus_part2_title"><span>到账方式</span></div>
      <div class="w_part3_box">
        <ul>
          <li style="border: 1px solid #ff491f">
            <div>
              <img src="../../assets/m8.png" />
            </div>
            <div class="w_part3_card">
              <p>银行卡</p>
            </div>
          </li>
          <li style="background: #f6f6f6">
            <div>
              <img src="../../assets/m7.png" />
            </div>
            <div class="w_part3_card">
              <p style="color: #999; line-height: 6.66vw">支付宝</p>
              <p style="color: #999; line-height: 6.66vw">即将上线</p>
            </div>
          </li>
        </ul>
      </div>
    </van-row>
    <van-row class="w_part2" style="background-color: transparent;">
      <div class="bonus_part2_title"><span>提现说明</span></div>
      <div class="text_1">
        <p>1.请于工作日每天9：00至21：00时间内到账</p>
        <p>2.单日最多到账1次，到账手续费6%</p>
        <p>3.最小提现金额为{{userInfo.with_less_money?userInfo.with_less_money:'10'}},提现金额为10的倍数</p>
        <p>4.到账需人工审核，遇节假日顺延</p>
      </div>
    </van-row>
    <van-row class="w_part2" style="margin-top: 6vw;padding-top: 10px;">
      <van-button style="font-size: 4.8vw; height: 13.33vw;border-radius: 5px;" @click="withdrawalHanlder"
        color="#FF491F" type="info" native-type="submit" block>提现</van-button>
    </van-row>
    <van-dialog v-model="showDialog" title="开卡提示" @confirm="handlerShowDialog" @cancel="cancelDialog" show-cancel-button
      confirmButtonText="进行校验" confirmButtonColor="#FF491F">
      <div style="margin: 4vw">
        需要您先开通套餐，才能享受申请到账。已经开卡，直接进行校验即可
      </div>
    </van-dialog>
    <van-dialog v-model="failureDialog" title="欠费提示" @confirm="handlerfailureDialog" confirmButtonText="确认"
      confirmButtonColor="#FF491F">
      <div style="margin: 4vw">
        你的卡号现在已欠费，请保证正常缴费，才能解除到账限制；补缴成功后，方可到账。
      </div>
    </van-dialog>
  </div>
</template>
<script>
import {
  getFttuserUserId,
  getFttuserUserId2,
  postwithdraws,
  postwithdraws2,
  getSummary,
  getMemberbankcards,
  getMemberidcards,
  getuserInfo,
  getCardinfo,
  score_send,
  getmoney
} from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Toast } from 'vant';

export default {
  name: "withdrawal",
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      tabList: ["老余额提现", "零批余额提现", "广告创收提现"],
      active: 0,
      userMobile: "",
      codeText: '获取验证码',
      codeFalg: true,
      refDisabled: false,
      captcha: "",
      showView: true,
      uid: weixin.getUserId(),
      list: [],
      value: "",
      showDialog: false, //开卡弹窗
      failureDialog: false, //欠费弹窗
      withdrawalDetails: {},
      money: "",
      message: "",
      summary: 0.0,
      cash: 0.0,
      LOADING: false,
      cardinfo: {},
      userInfo:{},
      with_type:2
    };
  },
  async mounted() {
    
    await this.getUserInfo()
    let active = Number(this.$route.params['openType'])
    if(active==3){//零批余额提现
      this.active = 1
    }else if(active==1){//老余额提现
      this.active = 0
    }else if(active == 2){//广告创收提现
      this.active = active
    }
    this.childActive(this.active)
    if (this.one_day_order == 0) {
      this.$dialog
        .alert({
          title: "到账",
          message: "亲，本月您还未在每月一品专区购买过商品，赶快去购买吧！",
          showCancelButton: true,
          confirmButtonText: "去购买",
        })
        .then(() => {
          this.$router.push("/everyMonth");
        }).catch(() => {
          this.backHandler()
        });
      return;
    } else {
      this.init();
      // this.getMoneyData(0);
    }
  },

  methods: {
    withdrawalList() {
      
      this.$router.push({name:"withdrawalList", params:{openType:this.with_type}});
    },
    //返回
    backHandler() {
      if (this.active || this.active == 0) {
        this.$router.go(-1);
      } else {
        if (weixin.isAndroid()) {
          window.JS_TROOPS.goBack();
        } else {
          this.$router.go(-1);
        }
      }
    },
    // 获取个人信息
    async getUserInfo() {
      await getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        this.LOADING = false;
        if (res.data.code == 1) {
          this.userInfo=res.data.data;
          this.summary = res.data.data.total_price;
          this.cash = res.data.data.old_price;
          this.one_day_order = res.data.data.one_day_order
        }
      });
    },
    //初始化
    init() {
      this.LOADING = true;
      getCardinfo().then((res) => {
        console.log("getCardinfo", res);
        if (res.data.code == 1) {
          this.cardinfo = res.data.data;
          // this.userMobile = res.data.data.phone;
          if (res.data.data == null) {
            this.LOADING = false;
            this.$dialog
              .alert({
                message: "你还没有实名认证，现在去实名认证",
                showCancelButton: true,
              })
              .then(() => {
                this.$router.push("/realName");
              })
              .catch(() => {
                this.$router.go(-1);
              });
          }
          if (res.data.data.cardNo == null) {
            this.LOADING = false;
            this.$dialog
              .alert({
                message: "你还没有绑定成功银行卡，现在去绑定银行卡",
                showCancelButton: true,
              })
              .then(() => {
                this.$router.push("/bndingBank");
              })
              .catch(() => {
                this.backHandler()
              });
          }
        }
      }),
      getFttuserUserId2({}).then(res => {
          if (res.data.code == 1) {
            console.log("this.userMobile", res);
            this.userMobile = res.data.data.mobile;
          } else {
            // this.$dialog.alert({
            //     message:res.data.msg
            // })
          }
        })

      // getSummary({userId:this.uid}).then(res=>{
      //     if(res.data.code == 200){
      //         let data = res.data.data
      //         this.summary = data.pinmoney_bal + data.teamProfit_bal
      //         this.cash = data.pinmoney_bal
      //     }else {
      //         this.$dialog.alert({
      //             message:res.data.msg
      //         })
      //     }
      // })
    },
    //获取金额数据
    childActive(active){
        console.log(active);
        if(active==0){//老余额
          this.cash = this.userInfo.old_price;
          this.with_type=1;
        }else if(active==1){//零批
          this.cash = this.userInfo.lp_price;
          this.with_type=3;
        }else if(active==2){//广告收入
          this.cash = this.userInfo.advert_price;
          this.with_type=2;
        }
        console.log(this.cash)
    } , 
    //实名认证验证
    memberidCardsHandle() {
      getMemberidcards({ userId: this.uid }).then((res) => {
        if (res.data.code == 200) {
          let memberData = res.data.data;
          if (memberData.state == "pending") {
            this.$dialog
              .alert({
                message: "你还没有实名认证，现在去实名认证",
                showCancelButton: true,
              })
              .then(() => {
                this.$router.push("/realName");
              })
              .catch(() => {
                this.backHandler()
              });
          } else if (memberData.state == "failure") {
            this.$dialog
              .alert({
                message: "你实名认证失败，重新去实名认证",
                showCancelButton: true,
              })
              .then(() => {
                this.$router.push("/realName");
              })
              .catch(() => {
                this.backHandler()
              });
          } else if (memberData.state == "success") {
            //成功绑定银行卡
            this.memberbankCardsHandle();
          }
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    //绑定银行卡验证
    memberbankCardsHandle() {
      getMemberbankcards({ userId: this.uid }).then((res) => {
        if (res.data.code === 200) {
          let data = res.data.data.rows[0];
          if (data.state == "pending") {
            this.$dialog
              .alert({
                message: "你还没有绑定成功银行卡，现在去绑定银行卡",
                showCancelButton: true,
              })
              .then(() => {
                this.$router.push("/bndingBank");
              })
              .catch(() => {
                this.backHandler()
              });
          } else if (data.state == "failure") {
            this.$dialog
              .alert({
                message: "你绑定银行卡失败，重新去绑定银行卡",
                showCancelButton: true,
              })
              .then(() => {
                this.$router.push("/bndingBank");
              })
              .catch(() => {
                this.backHandler()
              });
          } else if (data.state == "success") {
            //成功
          }
        } else {
          this.$dialog
            .alert({
              message: res.data.msg,
            })
            .then(() => {
              this.$router.push("/bndingBank");
            })
            .catch(() => {
              this.backHandler()
            });
        }
      });
    },
    //金额验证
    moneyHandler(val) {
    
      var with_less_money = this.userInfo.with_less_money
      
      if (/\d/.test(val) && val % 10 == 0 && val >= parseInt(with_less_money)) {
        this.message = "";
      } else {
        this.message = "提现金额不能小于"+this.userInfo.with_less_money;
      }
    },
    //确认跳转
    handlerShowDialog() {
      this.$router.push("/card");
    },
    //欠费跳转
    handlerfailureDialog() {
      this.$router.push("/my");
    },
    //取消
    cancelDialog() {
      this.$router.push("/my");
    },
    //到账
    withdrawalHanlder() {
      console.log(this.userInfo.with_less_money);
      var with_less_money = this.userInfo.with_less_money
      if(this.money< parseInt(with_less_money)){
        Toast("提现金额不能小于"+this.userInfo.with_less_money)
        return;
      }
      postwithdraws2({
        money: this.money,
        idCard: this.cardinfo.idCard,
        type: "0",
        captcha: this.captcha,
        with_type:this.with_type
      }).then((res) => {
        if (res.data.code == 200) {
          this.$dialog
            .alert({
              message: "到账成功",
            }).then(() => {
              this.backHandler()
            });
        } else {
          this.$dialog
            .alert({
              message: res.data.msg,
            })
            .then(() => {

            });
        }
      });
    },
    //获取验证码
    codeHandler() {
      let that = this;
      let telLen = this.userMobile.length;
      if (telLen == 11) {
        let time = null;
        clearInterval(time);
        that.codeFalg = false;
        let t = 60;
        time = setInterval(function () {
          t--;
          that.codeText = "重新获取 ("+t+")";
          if (t <= 0) {
            that.codeText = "获取验证码";
            that.codeFalg = true;
            clearInterval(time);
          }
        }, 1000);

        score_send({
          mobile: this.userMobile
        }).then((res) => {
          if (res.data.code == 1) {
            Toast("验证码已发送")
          } else {
            this.$dialog.alert({
              message: res.data.msg,
            });
          }
        });
        return true;
      } else {
        this.message = "请输入正确手机号";
        return false;
      }
    },
  },


};
</script>
<style scoped>
p {
  padding: 0;
  margin: 0;
}

.bg {
  background: #F8F8F8;
  min-height: 100vh;
}

.bg_m {
  padding-top: 10px;
}

.bg_m_img {
  background: url("../../assets/m6bg.png");
  background-size: 100%;
  height: 33.33vw;
  background-repeat: repeat-x;
  padding: 10px;
  padding-bottom: 0;
}

.bg_m_img ul {
  display: flex;
  justify-content: space-around;
}

.bg_m_img ul li {
  width: 50%;
  color: #fff;
  margin-left: 20px;
  margin-top: 15px;
}

.bg_m_img ul li p {
  font-size: 6vw;
}

.bg_m_img ul li span {
  font-size: 3.5vw;
  line-height: 30px;
}

.w_part2 {
  padding-left: 4vw;
  padding-right: 4vw;
  background: #fff;
  padding-bottom: 20px;
}

.bonus_part2_title {
  line-height: 50px;
  font-size: 14px;
  display: flex;
}

.bonus_part2_title span {
  font-size: 13px;
  color: #666666;
}

.text_1 p {
  font-size: 3.2vw;
  color: #a09894;
}

.w_part2_box {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 3vw;
}

.w_part2_box label {
  font-size: 6vw;
}

.w_part2_box input {
  font-size: 8vw;
  width: 80%;
  border: none;
}

.w_part2_text {
  margin-top: 4.6vw;
  font-size: 2.9vw;
  color: #a09894;
}

.w_part3_box ul {
  display: flex;
  justify-content: space-around;
}

.w_part3_box ul li {
  border-radius: 2.6vw;
  border: 1px solid #e3e3e3;
  color: #333;
  width: 30vw;
  height: 13.33vw;
  line-height: 13.33vw;
}

.w_part3_box ul li img {
  width: 4.5vw;
  height: 4.5vw;
  float: left;
  margin-left: 4.5vw;
  margin-top: 4.5vw;
}

.w_part3_card {
  padding-left: 2.6vw;
  font-size: 3.7vw;
  float: left;
}

.login_box {
  color: #F86931;
  font-size: 14px;
  border-radius: 10px;
  line-height: 45px;
}

.login_box label {
  padding-left: 5.3vw;
}

.login_box input {
  height: 11vw;
  line-height: 11vw;
  width: 50vw;
  border: none;
}

/deep/ .van-cell {
  padding: 10px 0px;
  font-size: 14px;
}
</style>
